<template>
	<view>
		<view class="logo">
			<view class="img">
				<image :src="logo" mode="widthFix"></image>
			</view>
		</view>
		<view class="form re">
			<view class="username">
				<input placeholder="请输入用户名" v-model="userName" placeholder-style="color: #ccc;" />
			</view>
			<view class="username">
				<input placeholder="请输入手机号" v-model="mobile" placeholder-style="color: #ccc;" />
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="password" password=true placeholder-style="color: #ccc;" />
			</view>
			<view class="btn" @click="doReg">立即注册</view>
			<view class="res">
				<view @tap="toLogin">已有账号,立即登录</view>
			</view>
		</view>

	</view>
</template>

<script>
import { checkPhone, isEmpty, isEmptyObj } from '../../utils';
import { mapState, mapMutations } from 'vuex';
import throttle from '../../utils/throttle';
export default {
	data() {
		return {
			userName: "",
			mobile: "",
			code: '',
			password: "",
			invite_code: '',
			getCodeText: '获取验证码',
			getCodeBtnColor: "#005500",
			getCodeisWaiting: false
		}
	},
	computed: {
		...mapState('user', ['token', 'openid']),
		...mapState('sys', ['logo']),
	},
	onLoad() {
		// this.getLogo();
	},
	onBackPress() {
		return uni.switchTab({
			url: '/pages/user/user'
		})
	},
	methods: {
		...mapMutations('user', ['setToken', 'setUserInfo', 'setWxMiniOpenId', 'setOpenId']),
		...mapMutations('sys', ['setLogo']),
		getLogo() {
			if (isEmpty(this.logo)) {
				this.$ajax.get('common/logo').then(data => {
					this.setLogo(data);
				})
			}
		},
		toLogin() {
			return uni.navigateTo({
				url: '/pages/public/login'
			})
		},
		Timer() { },
		getCode() {
			uni.hideKeyboard()
			if (this.getCodeisWaiting) {
				return;
			}
			if (!checkPhone(this.mobile)) {
				return this.$toast('请输入正确的手机号');
			}

			const params = {
				phone: this.mobile
			}
			this.$ajax.post('您的短信接口', params).then(data => {
				if (0 == data.error) {
					this.setTimer();
				} else {
					this.$toast(data.msg);
				}
			})
		},
		setTimer() {
			let holdTime = 60;
			this.getCodeText = "重新获取(60)"
			this.Timer = setInterval(() => {
				if (holdTime <= 0) {
					this.getCodeisWaiting = false;
					this.getCodeBtnColor = "#005500";
					this.getCodeText = "获取验证码"
					clearInterval(this.Timer);
					return;
				}
				this.getCodeText = "重新获取(" + holdTime + ")"
				holdTime--;
			}, 1000)
		},
		doReg: throttle(function () {
			const that = this;
			if (!checkPhone(that.mobile)) {
				this.$toast('手机号码错误');
				return;
			}
			if (isEmpty(that.password)) {
				this.$toast('密码必须填写');
				return;
			}
			if (isEmpty(that.userName)) {
				this.$toast('用户名必须填写');
				return;
			}

			const params = {
				mobile: that.mobile,
				password: that.password,
				userName: that.userName
			};

			that.$ajax.get('superUser/reOnWeb', params).then(res => {
				console.log(res);
				if (res.success) {
					that.$toast(res.message);
					that.setToken(res.result);
					that.$ajax.get('superUser/getMyInfo').then(data => {
						console.log(data);
						if (data.success) {
							this.setUserInfo(data.result);
						}
					})
					setTimeout(function () {
						return uni.switchTab({
							url: '/pages/user/user'
						});
					}, 1000)
				} else {
					that.$toast(res.message);
				}
			}).catch(err => {
				console.log(err);
			})
			// this.$ajax.post('common/register', params).then(data => {
			// 	if (0 == data.error) { //注册成功 直接返回token
			// 		that.disabled = true;
			// 		that.setToken(data.data.token)
			// 		that.$toast(data.msg);
			// 	} else {
			// 		that.$toast(data.msg);
			// 		that.disabled = false;
			// 	}
			// })
		}),
		// toRead() {
		// 	uni.navigateTo({
		// 		url: '/pages/public/proto'
		// 	});
		// },

	}
}
</script>

<style lang="scss">
page {
	background: #FFFFFF;
	height: 100%;
}

.icon {
	color: #ffffff;
}

.logo {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	.img {
		width: 200rpx;
		height: 200rpx;
		margin: 50rpx 0;

		image {
			width: 100%;
			height: 100%;
			border-radius: 100%;
			border: 1px solid $base-color;
		}
	}
}

.form {
	width: 100%;
	padding: 0 7%;
	font-size: 30upx;

	.username,
	.password,
	.code {
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		border-radius: 45upx;
		background-color: #FFFFFF;
		border: 1px solid $base-color;
		padding: 0 45upx;
		box-sizing: border-box;
		margin-bottom: 26upx;

		input {
			width: 100%;
			height: 50upx;
			color: $font-color-000;
			font-weight: 200;
			font-size: $font-lg;
		}
	}

	.btn {
		color: #FFFFFF;
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20upx;
		background-color: $nav-bg;
		font-size: $font-lg;
	}
}

.re {
	.username {
		position: relative;

		.get-code {
			position: absolute;
			height: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;
			padding: 0 40upx;
			z-index: 3;

			&:after {
				content: " ";
				width: 2upx;
				height: 50upx;
				background-color: $nav-bg;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}
	}

	.res {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
		color: #999999;
	}
}
</style>
